<template>
  <div>
<!--    <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">-->
<!--      <div style="display: flex;align-items: center;gap: 6px;font-size: 13px;color: #919090">-->
<!--        状态：-->
<!--        <el-select v-model="status" placeholder="请选择" style="width: 200px" size="mini" @change="search">-->
<!--          <el-option label="未上报" value="0"/>-->
<!--          <el-option label="已上报" value="1"/>-->
<!--          <el-option label="处理完成" value="2"/>-->
<!--          <el-option label="审批失败" value="3"/>-->
<!--        </el-select>-->
<!--      </div>-->
<!--    </div>-->
    <marginal-card
      v-for="(item,index) in orderList"
      :key="index"
      :row="item"
      status="approval"
      @click="itemClick(item)"
    >
      <template #action="{row}">
        <el-button v-if="row.approvalStatus !== '0'" type="danger" size="small" round plain @click.stop="audit(row,'0')">不通过</el-button>
        <el-button v-if="row.approvalStatus !== '0'" type="primary" size="small" round plain @click.stop="audit(row,'1')">通过</el-button>
      </template>
    </marginal-card>
    <div style="display: flex;justify-content: flex-end" v-if="orderList.length">
      <el-pagination
          @size-change="handlePageChange"
          @current-change="handleIndexChange"
          :page-size="pageSize"
          :current-page="pageNum"
          background
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <el-empty v-if="!orderList.length"/>
  </div>
</template>

<script lang="ts">
import {Component, Prop,Mixins} from 'vue-property-decorator';
import {changeApplyApproval, userApprovalList} from "@/api/investDataCommon";
import MarginalCard from "@/views/region/components/MarginalCard.vue";
import pageMixins from "@/mixins/pageMixins";
@Component({
  components: {
    MarginalCard
  }
})
export default class SameApproval extends Mixins(pageMixins) {

  @Prop() private workId!: any;
  private status:any=''
  protected async getDataFromApi(params: any) {
    if(this.workId){
      const res:any = await userApprovalList(this.workId,this.status,params.pageNum,params.pageSize)
      if(res){
        return {
          data: res.data || res.rows || [],
          total: res.total
        }
      }
    }
  }
  audit(row:any,status:any){
    this.$prompt(status==='1' ? '是否确认通过':'是否确认不通过',{
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      showInput: true,
      inputPlaceholder: '请输入备注'
    }).then((value:any)=>{
      let formData = {
        status,
        id:row.id,
        remark:value.value
      }
      return changeApplyApproval(formData).then(()=>{
        this.$message.success('提交成功')
        this.fetchData()
      })
      // eslint-disable-next-line @typescript-eslint/no-empty-function
    }).catch(()=>{})
  }
  itemClick(item:any){
    this.orderList.forEach((_item: any) => {
      this.$set(_item, '_active', _item.id === item.id);
    });
  }
  mounted(){
    this.$nextTick(()=>{
      this.fetchData()
    })
  }
}
</script>
